<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Lobster Web应用Demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>
<style>
    .left {
        width: 40%;
    }

    body {
        background-color: #ffffff;
    }

    .title-row {
        display: flex;
        padding: 15px;
        align-items: center;
    }

    .page-cont {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #ffffff;
    }

    .right {
        flex: 1;
        overflow-y: auto;
    }

    .title-name {
        font-weight: 550;
        font-size: 16px;
        line-height: 30px;
    }

    .title-cont {
        font-size: 14px;
        line-height: 30px;
    }

    .look {
        display: flex;
        border-radius: 20px;
        padding: 15px;
        border: 1px solid #eeeeee;
        width: auto;
    }

    .look-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .look-number {
        font-size: 36px;
        color: #169BD5;
    }

    .look-line {
        margin: 0 25px;
        width: 1px;
        border-right: 1px solid #eeeeee;
        height: 90px;
    }
</style>

<body>
    <div class="page-cont  layui-form">
        <div class="left">
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
        <div class="right">
            <div id="headdiv">

            </div>

            <div>
                <div class="layui-tab layui-tab-brief" lay-filter="tabsel">
                    <ul class="layui-tab-title">
                        <li class="layui-this">在线人数</li>
                        <li>观看数据</li>
                        <li>互动数据</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="chart1" style="height: 300px;width: 100%;">

                            </div>

                        </div>
                        <div class="layui-tab-item">
                            <div id="chart2" style="height: 300px;width: 100%;">

                            </div>

                        </div>
                        <div class="layui-tab-item">
                            <div id="chart3" style="height: 300px;width: 100%;">

                            </div>

                        </div>
                    </div>

                </div>

            </div>

            <div style="display: flex;">
                <div id="pieChat1" style="height: 300px;width: 50%;"></div>
                <div id="pieChat2" style="height: 300px;width: 50%;"></div>
            </div>
        </div>
    </div>

</body>

</html>
<script type="text/html" id="headTemp">
    <div class="title-row">
        <div class="title-name">直播名称：</div> <div class="title-cont">{{d.SessionName}}</div>
        <div class="title-name" style="margin-left: 40px;">开始时间：</div><div class="title-cont">{{d.StartTime}}</div>
        <div class="title-name" style="margin-left: 40px;">场次编号：</div><div class="title-cont">{{d.SessionId}}</div>
        <div class="title-name" style="margin-left: 40px;">点赞数：</div><div class="title-cont">{{d.PraiseCount}}</div>
    </div>
    <div style="display: flex;" >
        <div class="look">
            <div class="look-row">
                <div>直播时长(分钟)</div>
                <div class="look-number">{{d.zbsc}}</div>
            </div>
            <div class="look-line"></div>
            <div class="look-row">
                <div>观看人数</div>
                <div class="look-number">{{d.gkrs}}</div>
            </div>
            <div class="look-line"></div>
            <div class="look-row">
                <div>观看次数</div>
                <div class="look-number">{{d.gkcs}}</div>
            </div>
            <div class="look-line"></div>
            <div class="look-row">
                <div>观看时长(分钟)</div>
                <div class="look-number">{{d.gksc}}</div>
            </div>
            <div class="look-line"></div>
            <div class="look-row">
                <div>平均时长(分钟)</div>
                <div class="look-number">{{d.pjsc}}</div>
            </div>
        </div>
    </div>
   
</script>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laytpl', 'echarts'], function (exports) {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var admin = layui.admin;
        var setter = layui.setter;
        var laytpl = layui.laytpl;
        var controller = {
            data: {
                currentModel: {},//当前房间
                datatable: null,
                list: [],
                watchlist: [],
                joinlist: [],
                likelist: [],
                chatlist: [],
                model: {},
                userList: [],
                currentIndex: 0,
                zbsc: 0,
                pjsc: 0
            },
            //初始化页面
            initpage: function () {
                var self = this;
                this.data.currentModel = parent.currData;
                console.log(this.data.currentModel);
                this.getAllUserList(function () {
                    self.loadList();
                });
                this.pageEvent();
            },
            getAllUserList: function (func) {
                var self = this;
                var url = this.getbaseurl("LiveRoom.getAllUserList");
                admin.req({
                    url: url,  //控制器名称，方法名称
                    data: {},
                    done: function (res) {
                        self.data.userList = res.data.list;
                        console.log(res);
                        if (func) {
                            func();
                        }
                    }
                });
            },
            loadList: function () {
                var self = this;
                self.data.dataTable = table.render({
                    elem: "#dataTable",
                    where: {
                        roomId: self.data.currentModel.RoomId
                    },
                    toolbar: '',
                    url: self.getbaseurl("LiveRoom.getSessionByRoomId"),
                    height: "full-130",
                    size: '10',
                    page: true, //开启分页 
                    loading: true,
                    cols: [
                        [
                            {
                                field: 'SessionName', title: '场次名称', width: '25%',
                            },
                            // { field: 'AnchorName', title: '直播主持人', width: '15%' },
                            { field: 'StartTime', title: '开始时间', width: '30%' },
                            { field: 'EndTime', title: '结束时间', width: '30%' },
                            {
                                field: 'LiveWay', title: '类型', width: '15%', templet: function (d) {
                                    if (d.LiveWay == 0) {
                                        return '普通直播'
                                    } else {
                                        return '运动直播'
                                    }
                                }
                            },
                        ]
                    ],
                    done: function (res, curr, count) {
                        console.log(res)
                        self.data.list = res.data;
                        if (count > 0) {
                            $(".layui-table-view[lay-id='dataTable'] .layui-table-body tr[data-index = 0] ").click();
                        }
                    }
                });
            },
            //现实图标
            showHeadReport: function () {
                var self = this;
                var sessonTime = this.getseccend(this.data.model.StartTime, this.data.model.EndTime);
                var gkcs = this.data.watchlist.length;//观看次数
                var peopleArry = [];
                var sc = 0;
                if (this.data.watchlist.length > 0) {
                    this.data.watchlist.forEach(res => {
                        if (self.data.userList.length > 0) {
                            var aa = self.data.userList.filter(k => {
                                return k.MPUserId == res.UserId;
                            });
                            if (aa.length > 0) {
                                res.Age = self.GetAge(aa[0].Birthday.substr(0,10));
                            }else{
                                res.Age = 0;
                            }
                        }
                        res.EntryScend = self.getmyTime(res.EntryTime);
                        res.LeaveScend = self.getmyTime(res.LeaveTime);
                        sc += res.Duration;
                        var a = peopleArry.filter(b => {
                            return b.UserId == res.UserId;
                        });
                        if (a.length == 0) {
                            peopleArry.push(res);
                        }
                    })
                }
                var gkrs = peopleArry.length;//观看人数
                var gksc = Math.ceil(sc / 60);//观看时长
                var pjsc = 0;
                if (gkrs > 0) {
                    pjsc = Math.ceil(gksc / gkrs);
                }
                this.data.zbsc = sessonTime;
                this.data.pjsc = pjsc;
                var data = {
                    zbsc: sessonTime,
                    gkcs: gkcs,
                    gkrs: gkrs,
                    gksc: gksc,
                    pjsc: pjsc,
                    SessionName: this.data.model.SessionName,
                    SessionId: this.data.model.SessionId,
                    StartTime: this.data.model.StartTime,
                    PraiseCount:this.data.model.PraiseCount
                }
                this.showHeadView(data);
                this.reportView();
            },
            showHeadView: function (data) {
                var getTpl = headTemp.innerHTML, view = document.getElementById('headdiv');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                    form.render();
                });
            },
            reportView: function () {
                if (this.data.currentIndex == 0) {
                    this.showchat1();
                } else if (this.data.currentIndex == 1) {
                    this.showchat2();
                } else if (this.data.currentIndex == 2) {
                    this.showchat3();
                }
                this.showpiechat();
            },
            getseccend(startTime, endTime) {
                var s1 = new Date(startTime.replace(/-/g, "/").substr(0, 19));
                var s2 = new Date(endTime.replace(/-/g, "/").substr(0, 19));
                // 日期相差分钟数
                var totalMinuts = Math.ceil((s2.getTime() - s1.getTime()) / 1000 / 60);
                return totalMinuts;
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20210908194005415/live/?view=layui&fun=" + fun;
                return url;
            },
            getSessionReport: function (sessionId, func) {
                var self = this;
                var url = this.getbaseurl("LiveRoom.getSessionReport");
                admin.req({
                    url: url,  //控制器名称，方法名称
                    data: { sessionId: sessionId },
                    done: function (res) {
                        console.log(res);
                        self.data.watchlist = res.data.watchlist;
                        self.data.joinlist = res.data.joinlist;
                        self.data.likelist = res.data.likelist;
                        self.data.chatlist = res.data.chatlist;
                        if (func) {
                            func();
                        }
                    }
                });
            },
            pageEvent: function () {
                var self = this;
                table.on('row(dataTable)', function (obj) {
                    console.log(obj);
                    self.data.model = obj.data;
                    // var checkStatus = table.checkStatus('dataTable');
                    var sessionId = obj.data.SessionId;
                    self.getSessionReport(sessionId, function () {
                        self.showHeadReport();
                    });
                });
                element.on('tab(tabsel)', function (obj) {
                    self.data.currentIndex = obj.index;
                    self.reportView();
                })
            },
            //在线人数
            showchat1: function () {
                var self = this;
                var chartDom = document.getElementById('chart1');
                var myChart = echarts.init(chartDom);
                var xarry = [];
                var yarry = [];
                var sessonTime = this.getseccend(this.data.model.StartTime, this.data.model.EndTime);
                if (sessonTime >= 5) {
                    var part = Math.floor(sessonTime / 5);
                    var scend = 0;
                    xarry.push(scend);
                    for (var i = 1; i <= 5; i++) {
                        scend = scend + part;
                        if (i == 5) {
                            xarry.push(sessonTime);
                        } else {
                            xarry.push(scend);
                        }
                    }
                }
                var startscend = new Date(this.data.model.StartTime.substr(0, 19)).getTime();
                if (this.data.watchlist.length > 0) {
                    yarry.push(0);
                    for (var i = 1; i <= 5; i++) {
                        var endcend = 0;
                        if (i == 5) {
                            endcend = startscend + sessonTime * 60 * 1000;
                        } else {
                            endcend = startscend + i * 60 * 1000;
                        }

                        var watlen = this.data.watchlist.filter(res => {
                            return res.EntryScend <= endcend && res.LeaveScend >= endcend;
                        })
                        yarry.push(watlen.length);
                    }
                }
                var option;
                if(xarry.length==0||yarry.length==0){
                     xarry = [];
                     yarry = [];
                }
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xarry
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yarry,
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);

            },
            //观看数据
            showchat2: function () {
                var self = this;
                var chartDom = document.getElementById('chart2');
                var myChart = echarts.init(chartDom);
                var xarry = [];
                var yarry = [];
                var sessonTime = this.getseccend(this.data.model.StartTime, this.data.model.EndTime);
                if (sessonTime >= 5) {
                    var part = Math.floor(sessonTime / 5);
                    var scend = 0;
                    xarry.push(scend);
                    for (var i = 1; i <= 5; i++) {
                        scend = scend + part;
                        if (i == 5) {
                            xarry.push(sessonTime);
                        } else {
                            xarry.push(scend);
                        }
                    }
                }
                var startscend = new Date(this.data.model.StartTime.substr(0, 19)).getTime();
                if (this.data.watchlist.length > 0) {
                    var part = Math.floor(sessonTime / 5);
                    yarry.push(0);
                    for (var i = 1; i <= 5; i++) {
                        var endcend =0;
                        if(i==5){
                            endcend=startscend+sessonTime * 60 * 1000;
                        }else{
                            endcend=startscend + i*part * 60 * 1000;
                        }

                        var watlen = this.data.watchlist.filter(res => {
                            return res.EntryScend <= endcend;
                        })
                        yarry.push(watlen.length);
                    }
                }
                if(xarry.length==0||yarry.length==0){
                     xarry = [];
                     yarry = [];
                }
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xarry
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yarry,
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            //评论数
            showchat3: function () {
                var self = this;
                var chartDom = document.getElementById('chart3');
                var myChart = echarts.init(chartDom);
                var xarry = [];
                var yarry = [];
                var sessonTime = this.getseccend(this.data.model.StartTime, this.data.model.EndTime);
                if (sessonTime >=5) {
                    var part = Math.floor(sessonTime / 5);
                    var scend = 0;
                    xarry.push(scend);
                    for (var i = 1; i <= 5; i++) {
                        scend = scend + part;
                        if (i == 5) {
                            xarry.push(sessonTime);
                        } else {
                            xarry.push(scend);
                        }
                    }
                }
                var startscend = new Date(this.data.model.StartTime.substr(0, 19)).getTime() / 1000;
                if (this.data.chatlist.length > 0) {
                    yarry.push(0);
                    var part = Math.floor(sessonTime / 5);
                    for (var i = 1; i <= 5; i++) {
                        var endcend =0;
                        if(i==5){
                            endcend=startscend+sessonTime * 60 ;
                        }else{
                            endcend=startscend + i*part * 60 ;
                        }
                        var chatlen = this.data.chatlist.filter(res => {
                            return res.SendTime < endcend;
                        })
                        yarry.push(chatlen.length);
                    }
                }
                if(xarry.length==0||yarry.length==0){
                     xarry = [];
                     yarry = [];
                }
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xarry
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yarry,
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            //饼图
            showpiechat: function () {
                var self = this;
                var chartDom1 = document.getElementById('pieChat1');
                var myChart1 = echarts.init(chartDom1);
                // var sessonTime = this.getseccend(this.data.model.StartTime, this.data.model.EndTime);
                var option1;
                option1 = {
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '直播观看完整度',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: self.data.pjsc, name: '平均时长' },
                                { value: self.data.zbsc, name: '直播时长' }
                            ]
                        }
                    ]
                };
                option1 && myChart1.setOption(option1);
                //年龄
                var chartDom = document.getElementById('pieChat2');
                var myChart = echarts.init(chartDom);
                var age20_30=this.data.watchlist.filter(res=>{
                    return res.Age>=20&&res.Age<30;
                }).length;
                var age30_40=this.data.watchlist.filter(res=>{
                    return res.Age>=30&&res.Age<40;
                }).length;
                var age40_50=this.data.watchlist.filter(res=>{
                    return res.Age>=40&&res.Age<50;
                }).length;
                var age50_60=this.data.watchlist.filter(res=>{
                    return res.Age>=50&&res.Age<60;
                }).length;
                var ageother=this.data.watchlist.filter(res=>{
                    return res.Age>=60||res.Age<20;
                }).length;
                var option;
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '直播观看年龄分布',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: age20_30, name: '20~30岁' },
                                { value: age30_40, name: '30~40岁' },
                                { value: age40_50, name: '40~50岁' },
                                { value: age50_60, name: '50~60岁' },
                                { value: ageother, name: '其他' },
                            ]
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            getmyTime: function (str) {
                if (!str) {
                    return 0;
                }
                str = str.substr(0, 19);
                var a = new Date(str).getTime();
                return a;
            },
            GetAge(str) {
                var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
                if (r == null) return 0;
                var d = new Date(r[1], r[3] - 1, r[4]);
                if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
                    var Y = new Date().getFullYear();
                    return Y - r[1];
                }
                return 0;
            }
        }

        /*
        * 入口
        */
        controller.initpage();
    });

</script>